<template>
  <div class="articleManage_main">
    <div class="sx">
      <div>
        <span>评论内容:</span>
        <el-input clearable v-model="commentsSX.text" placeholder="请输入评论内容" style="width: 200px"/>
      </div>
      <el-pagination
          style="position: absolute;right: 0; bottom: 0"
          v-model:current-page="commentsSX.currentPage"
          :size="'default'"
          :disabled="false"
          :background="false"
          layout="total, prev, pager, next, jumper"
          :total="total"
          @current-change="handleCurrentChange"
      />
      <el-button type="primary" @click="getComment">搜索</el-button>
    </div>
    <div class="mx">
      <!--      数据表格-->
      <div class="mx_table">
        <el-table :data="comments" stripe style="width: 100%" height="700px">
          <el-table-column label="评论ID" align="center" prop="id">
          </el-table-column>
          <el-table-column label="评论内容" align="center" prop="text" width="550px">
          </el-table-column>
          <el-table-column label="点赞量" align="center" prop="like"/>
          <el-table-column label="创建人" align="center" prop="user.userName"/>
          <el-table-column label="创建日期" align="center" prop="createTime">
            <template v-slot="scope">
              <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button type="danger" @click="commentDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

    </div>

  </div>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {articleBanApi} from "@/api/articleApi.js";
import {parseTime} from "@/tool/utils.js";
import {getDict} from "@/api/common.js";
import {ElMessage, ElMessageBox} from "element-plus";
import {deleteCommentApi, getCommentAllApi} from "@/api/commentApi.js";

const total = ref(0)
const commentsSX = ref({
  currentPage: 1,
  pageSize: 10,
  text:''
})
const comments = ref([])
const articleTypeDict = ref([])
const articleStatusDict = ref([])
onMounted(() => {
  initData()
})

function initData() {
  getComment()
}

//获取文章
function getComment() {
  getCommentAllApi(commentsSX.value).then(res => {
    comments.value = res.data.commentList
    total.value = res.data.total
  })
}


//切页数
function handleCurrentChange(currentPage) {
  commentsSX.value.currentPage = currentPage
  getComment()
}

//文章封禁
function articleBan(id, status) {
  articleBanApi(id, status).then(res => {
    ElMessage({message: res.msg, type: 'success'})
    getComment()
  })
}

//删除文章
function commentDelete(id) {
  ElMessageBox.confirm(
      '你确定要删除这个评论吗?',
      '警告',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  )
      .then(() => {
        deleteCommentApi(id).then(res => {
          ElMessage({message: res.msg, type: 'success'})
          getComment()
        })
      })

}
</script>

<style scoped>
.articleManage_main {
  width: 100%;
  height: 100%;
  background-color: #f0f0f0;
  padding-top: 10px;
}

.sx {
  position: relative;
  width: 98%;
  height: 100px;
  background-color: white;
  margin: 0 auto 10px auto;
  border-radius: 3px;
}

.mx {
  width: 98%;
  height: 100%;
  background-color: white;
  margin: 0 auto;
  border-radius: 3px;
}
</style>